@import '../../../../styles/modules/all';

app-scan {
  --color-button-fab-bg: #{$color-bg3-default};
  --color-button-fab-text: #{$color-text2-default};

  display: block;

  @include theme-dark {
    --color-button-fab-bg: #{$color-text3-dark};
    --color-button-fab-text: #{$color-text1-dark};
  }

  h3 {
    font-size: 1rem;
    left: 0;
    position: fixed;
    right: 0;
    text-align: center;
    top: 12vh;
  }

  .buttons {
    bottom: 20vh;
    left: 0;
    position: fixed;
    right: 0;

    icon-button {
      &.enabled {
        button {
          background-color: var(--color-warning);
        }
      }
    }
  }

  .validation {
    font-size: 1rem;
    padding: 0.25em 1em;
    position: absolute;
    top: 42vh;
  }

  .view-content {
    border-color: rgba(0, 0, 0, 0.5);
    border-style: solid;
    border-width: 25vh 15vw 40vh;
    padding: 0 !important;
  }

  @media (orientation: landscape) {
    h3 {
      top: 15vh;
    }

    .buttons {
      bottom: 10vh;
    }

    .validation {
      top: 47vh;
    }

    .view-content {
      border-width: 27vh 40vw 32vh;
    }
  }
}
